<script setup lang="ts">
import { onUpdated, ref } from 'vue'
import ChatBar from '@/components/chat/ChatBar.vue'
import { useChatStore } from '@/stores/chat'
import { useUnityRoleStore } from '@/stores/unityRole'

const useChat = useChatStore()
const useUnityRole = useUnityRoleStore()
const pendingChatContent = ref('')
const chat = () => {
  const pendingChatContentText = pendingChatContent.value

  const isIssued: boolean = useChat.chatBot(pendingChatContentText, 'user', (res) => {
    const talk = useUnityRole.getUnityRoleTalk
    talk({ audioUrl: res.data.audioUrl })
  })
  if (isIssued) pendingChatContent.value = ''
}
const scrollbarRef = ref<HTMLElement>()
const scrollToBottom = () => {
  if (scrollbarRef.value) {
    scrollbarRef.value.scrollTop = scrollbarRef.value.scrollHeight
  }
}

onUpdated(() => {
  scrollToBottom()
})
</script>

<template>
  <div class="relative flex flex-col w-full h-full">
    <!--清除对话-->
    <n-tooltip trigger="hover" placement="bottom">
      <template #trigger>
        <div
          class="absolute -top-10 right-6 text-4xl text-white"
          v-show="useUnityRole.getIsUnityRoleLoadFinish"
        >
          . . .
        </div>
      </template>
      <div class="cursor-pointer" @click="useChat.clearChatHistory()">重启对话</div>
    </n-tooltip>

    <!--对话内容-->
    <div
      class="absolute top-10 bottom-[120px] w-full overflow-y-auto scrollbar pr-6"
      ref="scrollbarRef"
      v-show="useUnityRole.getIsUnityRoleLoadFinish"
    >
      <!--            <NScrollbar ref="scrollbarRef">-->
      <ChatBar
        v-for="item in useChat.getChatHistory"
        :key="item.content"
        :direction="item.type === 'bot' ? 'left' : 'right'"
        :content="item.content"
      />
      <!--            </NScrollbar>-->
    </div>
    <!--输入框-->
    <div
      class="absolute bottom-0 w-full h-[80px] mt-7"
      v-show="useUnityRole.getIsUnityRoleLoadFinish"
    >
      <NInput
        class="w-full h-full bg-primary text-warmGray-50 caret-warmGray-50 text-xl"
        v-model:value="pendingChatContent"
        @keyup.enter="chat"
        autosize
        round
      >
        <template #prefix>
          <img src="/src/assets/icon/chat/microphone.png" alt="麦克风" class="h-8 ml-3 mr-3" />
        </template>
        <template #suffix>
          <img
            src="/src/assets/icon/chat/aircraft.png"
            alt="发送"
            class="h-8 ml-3 mr-3"
            @click="chat"
          />
        </template>
      </NInput>
    </div>
  </div>
</template>

<style scoped>
/* 自定义滚动条样式 */
.scrollbar::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* 滚动条滑块颜色 */
  border-radius: 5px; /* 滚动条滑块圆角 */
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8); /* 滑块悬停时的颜色 */
}

.scrollbar::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1); /* 滚动条轨道背景色 */
  border-radius: 5px; /* 滚动条轨道圆角 */
}

.scrollbar::-webkit-scrollbar-track:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 滚动条轨道悬停时的背景色 */
}
</style>
